<template>
  <div class="operating-record">
    <el-timeline class="not-icon-timeline timeline-style">
      <el-timeline-item
        v-for="(item) in logsData"
        :key="item.operationTime"
        :timestamp="item.operationTime / 1000 | format('YYYY/MM/DD')"
        color="#fff"
        placement="top">
        <div v-for="(data, index) in item.operations" :key="data.time + index + ''">
          <div :style="index === item.operations.length - 1?'padding-bottom:0px;':''" class="detail">
            <div :span="18" style="display: flex; flex: 1; align-items: center;width: 70%">
              <div v-if="(isAdmin || data.opeatorUserId === userInfo.id) && isShowEdit" class="edit-btn" style="flex-shrink: 0;" @click="editRemark(data)"><img :src="editIcon" alt=""></div>
              <div v-if="data.type === '感兴趣' && data.content" class="btn" @click="toDialog(data)">点击查看具体内容</div>
              <el-tooltip v-else-if="data.content" effect="dark" placement="top" popper-class="content-tooltip">
                <div slot="content">
                  <div style="max-width:300px" v-html="handleRemark(data.content)" />
                </div>
                <span :style="`${showMobilePage && !data.remarks?'':'max-width: 50%'}`" class="ellipsis" style="margin-right: 10px;">{{ handleContent(data) }}</span>
              </el-tooltip>
              <span class="ellipsis" style="max-width: 80%">
                <span v-if="data.remarks" class="text-black">备注：</span>
                <el-tooltip v-if="data.remarks" effect="dark" placement="top" popper-class="content-tooltip">
                  <div slot="content">
                    {{ data.remarks }}
                  </div>
                  <span class="ellipsis" style="max-width: 80%">
                    {{ data.remarks }}
                  </span>
                </el-tooltip>
              </span>
            </div>
            <div v-if="showDetailTime" :span="6" class="time">{{ data.time / 1000 | format('YYYY/MM/DD HH:mm:ss') }}</div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <div v-if="isFold && logs && logs.length > 3" class="expand-text" @click="switchExpand">
      <div class="item">{{ isExpand?'收起':'展开' }}全部记录 <i :class="isExpand?'el-icon-arrow-up':'el-icon-arrow-down'"/></div>
    </div>
    <edit-log-dialog ref="editLogDialog" :edit-api="editApi" :order-type="orderType" @success="editSuccess" />
    <recordDialog ref="recordDialog" is-log title="日志内容"/>
  </div>
</template>
<script>
import { standardFormatNoHour, standardFormat, format } from '@/filters/date';
import { mapState } from 'vuex';
import editIcon from '@/assets/edit.png';
import Title from '@/components/Title';
import EditLogDialog from '@/components/EditLogDialog';
import recordDialog from './recordDialog';
export default {
  name: 'LogTimeLine',
  filters: {
    standardFormatNoHour,
    standardFormat, format
  },
  components: {
    Title,
    EditLogDialog,
    recordDialog
  },
  props: {
    logs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isFold: {
      type: Boolean,
      default: false
    },
    editApi: {
      type: Function,
      default: () => ({})
    },
    orderType: {
      type: Number,
      default: null
    },
    isShowEdit: {
      type: Boolean,
      default: true
    },
    showDetailTime: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editIcon,
      isExpand: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAdmin() {
      if (this.userInfo.userName === '管理员') return true;
      return false;
    },
    logsData() {
      if (this.isFold && !this.isExpand && this.logs && this.logs.length > 3) {
        return this.logs.slice(0, 3);
      }
      return this.logs;
    }
  },
  methods: {
    handleContent(data) {
      return `${data.opeatorUser ? `${data.opeatorUser}，` : ''}${data.content.replace(/<br>/g, '')}`;
    },
    handleRemark(content = '') {
      return content.replace(/(\r\n)|(\n)/g, '<br>&nbsp;&nbsp;&thinsp;');
    },
    switchExpand() {
      this.isExpand = !this.isExpand;
    },
    editRemark(item) {
      this.$refs['editLogDialog'].dialogVisible = true;
      this.$refs['editLogDialog'].initData(item);
    },
    editSuccess() {
      this.$emit('success');
    },
    handelEdit(data) {
      console.log(data);
    },
    toDialog(data) {
      let feedback = data.content;
      feedback = feedback.replace(/(\r\n)|(\n)/g, '<br>');
      const splitArr = feedback.split(/(?=<br>1\.)/);
      const feedItem = {
        logTitle: splitArr[0],
        feedback: splitArr[1]
      };
      this.$refs.recordDialog.openDialog([feedItem]);
    }
  }
};
</script>
<style lang="scss" scoped>
.timeline-style {
  padding-left: 88px;
  &::v-deep {
    .el-timeline-item__wrapper {
      .el-timeline-item__timestamp.is-top {
        position: absolute;
        left: -88px;
        color: #666666;
        font-size: 14px;
        top: -3px;
      }
    }
    .el-timeline-item {
      padding-bottom: 12px;
      padding-top: 12px;
      .el-timeline-item__tail {
        border-left: 1px solid #DDDDDD;
      }
      &::after {
        content: '';
        background-color: #EDEEF2;
        width: calc(100% - 24px);
        position: absolute;
        bottom: 0;
        left: 24px;
        height: 1px;
      }
      &:last-child {
        padding-bottom: 0px;
        &::after {
          display: none;
        }
      }
    }
    .el-timeline-item__node {
      left: 0px;
      border: 2px solid #FD8546;
      width: 9px;
      height: 9px;
    }
  }
}
.expand-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  .item {
    font-size: 14px;
    color: #141C3D;
    cursor: pointer;
    display: flex;
    align-items: center;
    i {
      color: #406eff;
      margin-left: 5px;
    }
  }
}
.operating-record {
  .el-timeline-item__wrapper {
    .detail {
      display: flex;
      align-items: center;
      // line-height: 26px;
      padding-bottom: 16px;
      line-height: 1.2;
      border-radius: 8px;
      // border: 1px solid #eee;
      color: #333;
      font-size: 14px;
      .time {
        text-align: right;
        color: #999;
      }
    }
  }
  .text-black {
    font-weight: 600;
    color: #333;
  }
  .edit-btn {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin-right: 10px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .btn {
    cursor: pointer;
    color: #406eff;
  }
}
</style>
<style lang="scss">
  .content-tooltip {
    max-width: 350px;
  }
</style>
